<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box {
        width: 400px;
        height: 300px;
        background-color: aqua;
        display: none;
      }
    </style>
  </head>
  <body>
    <button>淡入</button>
    <button>淡出</button>
    <button>淡入到指定的不透明度</button>
    <div class="box">box</div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //fadeIn（）	:淡入
    $("button")
      .eq(0)
      .click(function () {
        //$(".box").fadeIn();
        //$(".box").fadeIn("fast"); //200ms
        //$(".box").fadeIn("norma;");  //400ms
        //$(".box").fadeIn("slow");    //600ms
        $(".box").fadeIn(3000); //自定义
      });
    //fadeOut（）	:淡出
    $("button")
      .eq(1)
      .click(function () {
        //$(".box").fadeOut();
        //$(".box").fadeOut("fast"); //200ms
        //$(".box").fadeOut("normal"); //400ms
        //$(".box").fadeOut("slow");    //600ms
        $(".box").fadeOut(3000);
      });
    //fadeTo（）	:淡入到指定的不透明度
    $("button")
      .eq(2)
      .click(function () {
        $(".box").fadeTo("3000",.5);//必须传入两个参数
        $(".box").fadeTo("normal",.5);
        $(".box").fadeTo("fast",.5);
      });
  </script>
</html>
